<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/JQuery/jquery.js"></script>
</head>

<body>
    <div>
        <p><button id="btnGET">发起GET请求</button></p>
        <a href="javascript:;">
            <img src="" alt=".jpg" width="100px">
        </a>
        <p>
            <span>图书：</span>
            <span class="bookname"></span>
        </p>
        <p>
            <span>作者：</span>
            <spa class="author"></spa>
        </p>
        <p>
            <span>出版社：</span>
            <span class="publisher"></span>
        </p>
    </div>
    <div>
        <!-- <p><button id="btnGET">发起GET请求</button></p> -->
        <a href="javascript:;">
            <img src="" alt=".jpg" width="100px">
        </a>
        <p>
            <span>图书：</span>
            <span class="bookname"></span>
        </p>
        <p>
            <span>作者：</span>
            <spa class="author"></spa>
        </p>
        <p>
            <span>出版社：</span>
            <span class="publisher"></span>
        </p>
    </div>





    <script>
        $(function () {
            $("#btnGET").on("click", function () {
                $.ajax({
                    type: "GET", // 请求方式    get 或者 post
                    url: "http://www.liulongbin.top:3006/api/getbooks", // 访问网址
                    // data: {      // 查看指定id=1的数据
                    //     id: 1
                    // },
                    success: function (res) { // 请求之后的回调函数
                        console.log(res);
                        console.log(res.data[0].publisher);
                        $('.bookname').html(res.data[0].bookname)
                        $('.publisher').html(res.data[0].publisher)
                        $('.author').html(res.data[0].author)
                        $("img").attr({
                            "src": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.kfzimg.com%2Fsw%2Fkfzimg%2F1307%2Ff447136adc3f8d57_b.jpg&refer=http%3A%2F%2Fwww.kfzimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650680721&t=62528a24c07955458421414338c77ad0",
                            "title": "西游记"
                        });
                        // 将字符串转化为JSON对象
                        // var data = JSON.parse(res);
                        // console.log(data);
                    }
                })
            })
        })
    </script>
</body>

</html>